import React from 'react'
import { Button, Form, Input,message } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Link,useNavigate } from 'react-router-dom'
import './less/Login.less'
import logoImg from '../assets/logo.jpg'
import {RegisterApi} from '../request/api'


export default function Register() {
  //1.注册成功跳转到登录页，添加路由Hooks useNavigate
  const navgate = useNavigate()

  const onFinish = (values) => {
    RegisterApi({
      username: values.username,
      password: values.password
    }).then(res=>{
      //如果注册成功和失败提示
      if(res.errCode===0){
        message.success(res.message);
        //2.如果成功1.5s就跳转到登录页  navgate     
        setTimeout(()=>{
          navgate('/login')
        },1500)
      }else{
        message.error(res.message);
      }
    })
  };

  return (
    <div className='login'>
      <div className='login_box'>
        <img src={logoImg} />
        <Form
          name="basic"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: '请输入用户名',
              },
            ]}
          >
            {/* placeholder.表单提示文字 */}
            <Input
              size='large'
              prefix={<UserOutlined />}
              placeholder="请输入用户名" />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码！',
              },
            ]}
          >
            <Input.Password
              size='large'
              prefix={<LockOutlined />}
              placeholder="请输入密码" />
          </Form.Item>

            {/* 确认密码框 */}
          <Form.Item
            name="confirm"
            dependencies={['password']}
            hasFeedback
            rules={[
              {
                required: true,
                message: '请再次确认密码！',
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve();
                  }

                  return Promise.reject(new Error('请输入相同密码!'));
                },
              }),
            ]}
          >
            <Input.Password 
              size='large'
              prefix={<LockOutlined />}
              placeholder="请再次确认密码"/>
          </Form.Item>

          <Form.Item>
            <Link to="/login">已有账号？前往登录</Link>
          </Form.Item>

          <Form.Item>
            <Button size='large' type="primary" htmlType="submit" block>立即注册</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

